<div
    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
    cdkScrollable>

    <!-- Header -->
    <div class="relative flex-0 py-8 px-4 sm:p-16 overflow-hidden bg-gray-800 dark">
        <!-- Background - @formatter:off -->
        <!-- Rings -->
        <svg class="absolute inset-0 pointer-events-none"
             viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
                <circle r="234" cx="196" cy="23"></circle>
                <circle r="234" cx="790" cy="491"></circle>
            </g>
        </svg>
        <!-- @formatter:on -->
        <div class="z-10 relative flex flex-col items-center">
            <h2 class="text-xl font-semibold">FUSE ACADEMY</h2>
            <div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
                What do you want to learn today?
            </div>
            <div class="max-w-2xl mt-6 sm:text-2xl text-center tracking-tight text-secondary">
                Our courses will step you through the process of a building small applications, or adding new features to existing applications.
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex flex-auto p-6 sm:p-10">

        <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
            <!-- Filters -->
            <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
                <mat-form-field class="fuse-mat-no-subscript w-full sm:w-36">
                    <mat-select
                        [value]="'all'"
                        (selectionChange)="filterByCategory($event)">
                        <mat-option [value]="'all'">All</mat-option>
                        <ng-container *ngFor="let category of categories; trackBy: trackByFn">
                            <mat-option [value]="category.slug">{{category.title}}</mat-option>
                        </ng-container>
                    </mat-select>
                </mat-form-field>
                <mat-form-field
                    class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
                    [floatLabel]="'always'">
                    <mat-icon
                        matPrefix
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:search'"></mat-icon>
                    <input
                        (input)="filterByQuery(query.value)"
                        placeholder="Search by title or description"
                        matInput
                        #query>
                </mat-form-field>
                <mat-slide-toggle
                    class="mt-8 sm:mt-0 sm:ml-auto"
                    [color]="'primary'"
                    (change)="toggleCompleted($event)">
                    Hide completed
                </mat-slide-toggle>
            </div>
            <!-- Courses -->
            <ng-container *ngIf="this.filteredCourses.length; else noCourses">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8 sm:mt-10">
                    <ng-container *ngFor="let course of filteredCourses; trackBy: trackByFn">
                        <!-- Course -->
                        <div class="flex flex-col h-96 shadow rounded-2xl overflow-hidden bg-card">
                            <div class="flex flex-col p-6">
                                <div class="flex items-center justify-between">
                                    <!-- Course category -->
                                    <ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
                                        <div
                                            class="py-0.5 px-3 rounded-full text-sm font-semibold"
                                            [ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
                                                        'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
                                                        'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
                                                        'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
                                            {{category.title}}
                                        </div>
                                    </ng-container>
                                    <!-- Completed at least once -->
                                    <div class="flex items-center">
                                        <ng-container *ngIf="course.progress.completed > 0">
                                            <mat-icon
                                                class="icon-size-5 text-green-600"
                                                [svgIcon]="'heroicons_solid:badge-check'"
                                                [matTooltip]="'You completed this course at least once'"></mat-icon>
                                        </ng-container>
                                    </div>
                                </div>
                                <!-- Course title & description -->
                                <div class="mt-4 text-lg font-medium">{{course.title}}</div>
                                <div class="mt-0.5 line-clamp-2 text-secondary">{{course.description}}</div>
                                <div class="w-12 h-1 my-6 border-t-2"></div>
                                <!-- Course time -->
                                <div class="flex items-center leading-5 text-md text-secondary">
                                    <mat-icon
                                        class="icon-size-5 text-hint"
                                        [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                    <div class="ml-1.5">{{course.duration}} minutes</div>
                                </div>
                                <!-- Course completion -->
                                <div class="flex items-center mt-2 leading-5 text-md text-secondary">
                                    <mat-icon
                                        class="icon-size-5 text-hint"
                                        [svgIcon]="'heroicons_solid:academic-cap'"></mat-icon>
                                    <ng-container *ngIf="course.progress.completed === 0">
                                        <div class="ml-1.5">Never completed</div>
                                    </ng-container>
                                    <ng-container *ngIf="course.progress.completed > 0">
                                        <div class="ml-1.5">
                                            <span>Completed</span>
                                            <span class="ml-1">
                                                <!-- Once -->
                                                <ng-container *ngIf="course.progress.completed === 1">once</ng-container>
                                                <!-- Twice -->
                                                <ng-container *ngIf="course.progress.completed === 2">twice</ng-container>
                                                <!-- Others -->
                                                <ng-container *ngIf="course.progress.completed > 2">{{course.progress.completed}}
                                                    {{course.progress.completed | i18nPlural: {
                                                        '=0'   : 'time',
                                                        '=1'   : 'time',
                                                        'other': 'times'
                                                    } }}
                                                </ng-container>
                                            </span>
                                        </div>
                                    </ng-container>
                                </div>
                            </div>
                            <!-- Footer -->
                            <div class="flex flex-col w-full mt-auto">
                                <!-- Course progress -->
                                <div class="relative h-0.5">
                                    <div
                                        class="z-10 absolute inset-x-0 h-6 -mt-3"
                                        [matTooltip]="course.progress.currentStep / course.totalSteps | percent"
                                        [matTooltipPosition]="'above'"
                                        [matTooltipClass]="'-mb-0.5'"></div>
                                    <mat-progress-bar
                                        class="h-0.5"
                                        [value]="(100 * course.progress.currentStep) / course.totalSteps"></mat-progress-bar>
                                </div>

                                <!-- Course launch button -->
                                <div class="px-6 py-4 text-right bg-gray-50 dark:bg-transparent">
                                    <button
                                        mat-stroked-button
                                        [routerLink]="[course.id]">
                                        <span class="inline-flex items-center">

                                            <!-- Not started -->
                                            <ng-container *ngIf="course.progress.currentStep === 0">
                                                <!-- Never completed -->
                                                <ng-container *ngIf="course.progress.completed === 0">
                                                    <span>Start</span>
                                                </ng-container>
                                                <!-- Completed before -->
                                                <ng-container *ngIf="course.progress.completed > 0">
                                                    <span>Start again</span>
                                                </ng-container>
                                            </ng-container>

                                            <!-- Started -->
                                            <ng-container *ngIf="course.progress.currentStep > 0">
                                                <span>Continue</span>
                                            </ng-container>

                                            <mat-icon
                                                class="ml-1.5 icon-size-5"
                                                [svgIcon]="'heroicons_solid:arrow-sm-right'"></mat-icon>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </div>
            </ng-container>

            <!-- No courses -->
            <ng-template #noCourses>
                <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                    <mat-icon
                        class="icon-size-20"
                        [svgIcon]="'iconsmind:file_search'"></mat-icon>
                    <div class="mt-6 text-2xl font-semibold tracking-tight text-secondary">No courses found!</div>
                </div>
            </ng-template>
        </div>

    </div>

</div>
